<template>
  <div style="padding: 3em">
    <t-space direction="vertical">
      <t-space>
        <span class="info-label">ID：</span>
        <span class="info-value">{{ userStore.Profile.user.id }}</span>
      </t-space>
      <t-space class="r-fx-row-czc">
        <span class="info-label">积分：</span>
        <span class="info-value">{{ userStore.Profile.profile.coin.toFixed(2) }}</span>
      </t-space>
      <t-space>
        <span class="info-label">账号：</span>
        <span class="info-value">{{ userStore.Profile.user.username }}</span>
      </t-space>
      <t-space v-if="userStore.Profile.profile.role.id <= 2">
        <span class="info-label">权限信息：</span>
        <span class="info-value">{{ userStore.Profile.profile.role.key }}</span>
      </t-space>
      <t-space class="r-fx-row-czc">
        <span class="info-label">当前的IP：</span>
        <span class="info-value">{{ userStore.Profile.ip }}</span>
      </t-space>
      <t-space class="r-fx-row-czc">
        <span class="info-label">注册时间：</span>
        <span class="info-value">{{ toLocalTimeByTimeSecond(userStore.Profile.user.created_at) }}</span>
      </t-space>
      <t-space></t-space>
      <t-space>
        <t-button theme="danger" size="large" @click="Logout">
          <template #icon>
            <PoweroffIcon/>
          </template>
          安全退出
        </t-button>
        <UpdatePassword @success="LogoutGoToLogin"/>
      </t-space>
    </t-space>
  </div>
</template>
<script lang="ts" setup>
import {getUserStore} from "../../../store/modules/user";
import {onMounted} from "vue";
import api from "../../../api/api";
import {toLocalTimeByTimeSecond} from "../../../tool/time";
import {getDefaultStore} from "../../../store/modules/default";
import {useRouter} from "vue-router";
import {PoweroffIcon} from "tdesign-icons-vue-next"
import UpdatePassword from "./info/update_password.vue"

const userStore = getUserStore()
const defaultStore = getDefaultStore()
const router = useRouter()
const GetProfile = async () => {
  let res = await api.User.Profile()
  if (res != null) {
    userStore.updateProfile(res.data)
  }
}

const Logout = async () => {
  let res = await api.User.Logout()
  if (res != null) {
    LogoutGoToLogin()
  }
}

const LogoutGoToLogin = () => {
  defaultStore.updateToken("")
  router.push({path: '/login'})
}

onMounted(() => {
  GetProfile()
})
</script>

<style lang="less" scoped>
.info-label {
  font-size: 1.5em;
  color: var(--td-text-color-disabled);
}

.info-value {
  font-size: 1.5em;
  color: var(--td-text-color-brand);
}
</style>